<template>
  <view class="blog-detail">
    <view class="blog-title">{{ blog.title }}</view>
    <view class="blog-author">作者：{{ blog.author }}</view>
    <view class="blog-content" v-html="blog.content"></view>
    <comment-section :initial-comments="blog.comments" :like-icon-src="likeIconSrc" :liked-icon-src="likedIconSrc" :collect-icon-src="collectIconSrc" :collected-icon-src="collectedIconSrc"></comment-section>
  </view>
</template>

<script>
import CommentSection from './comment.vue';

export default {
  components: {
    CommentSection
  },
  data() {
    return {
      blog: {
        title: '博客标题',
        author: '作者名字',
        content: '<p>这是博客内容。</p>',
        comments: [
          {
            username: 'kkrunning',
            time: '2023-12-20 17:05',
            content: '好耶',
            likes: 100,
            isLiked: false,
            collected: false,
            deletable: true,
            replies: [
              { username: '紧张的过客', content: '1' },
              { username: '王金', content: '2' }
            ]
          },
          // 其他评论数据
        ],
        likeIconSrc: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.glUulxeG79rKcxrolEr_6wHaHa?w=177&h=180&c=7&r=0&o=5&pid=1.7',
        likedIconSrc: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.hUG9UtuFss3KdtQJOWy-KAHaHa?w=177&h=180&c=7&r=0&o=5&pid=1.7',
        collectIconSrc: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.clNqt5ghQqpvHby60EkGxQAAAA?w=176&h=180&c=7&r=0&o=5&pid=1.7',
        collectedIconSrc: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.-3VVgMN-VYR0V7VHuJZNLQAAAA?w=191&h=191&c=7&r=0&o=5&pid=1.7'
      }
    };
  }
};
</script>

<style scoped>
.blog-detail {
  padding: 10px;
}
.blog-title {
  font-size: 24px;
  margin-bottom: 10px;
}
.blog-author {
  color: #666;
  margin-bottom: 10px;
}
.blog-content {
  margin-bottom: 10px;
}
</style>